<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
</head>
<body>
<!-- 导航栏 -->
<div class="nav">
    <img src="img/log2.jpg" alt="">
    <span class="title">我的oj题解系统</span>
    <!-- 这个标签仅仅用于占位, 把这几个 a 标签挤到右侧去 -->
    <div class="spacer"></div>
    <a href="blog_list.html">主页</a>
    <a href="blog_edit.html">写博客</a>
    <a href="logout">注销</a>
</div>
<!-- 页面主体部分 -->
<div class="container">
    <!-- 左侧信息 -->
    <div class="container-left">
        <!-- 使用这个 .card 表示用户信息 -->
        <div class="card">
            <!-- 用户头像 -->
            <img src="img/log.jpg" alt="">
            <!-- 用户名 -->
            <h3>良辰针不戳</h3>
            <a href="https://gitee.com/LiangChen0349">Gitee 地址</a>
            <a href="https://liangchen.blog.csdn.net/">CSDN   地址</a>
            <!-- <div class="counter">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="counter">
                <span>2</span>
                <span>1</span>
            </div> -->
        </div>
    </div>
    <!-- 右侧信息 -->
    <div class="container-right">
        <!-- 博客标题 -->
        <h3 class="title"></h3>
         <!-- 作者 -->
         <h5 class="username"></h5>
        <!-- 博客发布时间 -->
        <div class="date"></div>
        <!-- 博客正文, 为了配合 editormd 进行格式转换, 此处务必改成 id  -->
        <div id="content">

        </div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<!-- 要保证这几个 js 的加载在 jquery 之后. editor.md 依赖了 jquery -->
<script src="editor.md/lib/marked.min.js"></script>
<script src="editor.md/lib/prettify.min.js"></script>
<script src="editor.md/editormd.js"></script>
<script>
        $.ajax({
            type: 'get',
            url: 'blog' + location.search,
            success: function(body) {
                // 处理响应结果, 此处的 body 就是表示一个博客的 js 对象.
                // 1. 更新标题
                let titleDiv = document.querySelector('.container-right .title');
                titleDiv.innerHTML = body.title;
                //作者信息
                let writerDiv = document.querySelector('.container-right .username');
                writerDiv.innerHTML = body.username;
                // 2. 更新日期
                let dateDiv = document.querySelector('.date');
                dateDiv.innerHTML = body.postTime;
                // 3. 更新博客正文
                // 此处不应该直接把博客正文填充到这个标签里~~
                editormd.markdownToHTML('content', { markdown: body.content });
            }
        })

        function checkLogin() {
            $.ajax({
                type: 'get',
                url: 'login',
                success: function(body) {
                    if (body.userId && body.userId > 0) {
                        // 登录成功!!
                        console.log("当前用户已经登录!!");
                    } else {
                        // 当前未登录
                        // 强制跳转到登录页.
                        location.assign('login.html');
                    }
                }
            });
        }

        checkLogin();

        // 函数定义
        function getAuthor() {
            $.ajax({
                type: 'get',
                url: 'author' + location.search,
                success: function(body) {
                    // 把 username 设置到界面上
                    let h3 = document.querySelector('.container-left .card h3');
                    h3.innerHTML = body.username;
                }
            });
        }

        // 函数调用
        getAuthor();
    </script>
</body>
</html>